import {React,useState } from 'react'
import { Button, Layout, Table, Modal, Input } from 'antd'
import './RpsEmail.css'
import {ApiService } from '../common/ApiService'

const { Content } = Layout;

const ReSetPassword = () => {
    const contentStyle = {
        textAlign: 'center',
        color: '#fff',
        backgroundColor: '#141E20',
        display: 'flex',
        justifyContent:'center',
        alignItems: 'center',
        backgroundImage: "URL('../../public/images/rspEmailBg.png')",
        backgroundSize: 'contail',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center'
      };
      const layoutStyle = {
        width: '100%',
        maxWidth: '100%',
        minHeight: '100vh'
      };
      const [email, setEmail] = useState({ email: '' });
      const [error, setError] = useState(null);
      const handlRsp = async (e) => {
              e.preventDefault();
              try {
                var response = await ApiService.rpsemail(email);
                if (response.code === 0) {
                    setEmail({ email: '' });
                  alert('Please login to your email');
                } else {
                  alert(response.message)
                }
              } catch (err) {
                setError(err.message);
              }
            };
    return(
        <>
        <Layout style={layoutStyle}>
            <Content style={contentStyle}>
                <img className='relogo' onClick={()=>{location.href = '/'}} style={{cursor: 'pointer'}} src='../../public/images/LOGO1.svg' />
                <div className='setpassword'>
                    <div className='title'>
                    Forgot Password
                    </div>
                    <div className='subTxt'>E-mail</div>
                    <Input style={{
                        width: 440,
                        height: 50,
                        borderRadius: 30,
                        marginTop: 12,
                        backgroundColor: '#141E20',
                        color:"#fff"
                    }} value={email.email} onChange={(e) => setEmail({...email, email: e.target.value})}>
                    </Input>
                    <div className='tips'>
                        <div>Please enter your email</div>
                    </div>
                    <div className='btn'>
                        <Button style={{
                            width: 200,
                            height: 45,
                            borderRadius: 30,
                            backgroundColor: '#31F045',
                            color: '#000',
                            fontSize: 16,
                            border: 'none'
                        }} onClick={handlRsp}>Send Email</Button>
                    </div>
                    <div className='goLogin'>
                        <a href='/Login'>Back to Login</a>
                    </div>
                </div>
                <div className='minRobot'>
                    <img src='../../public/images/minRobot.svg' />
                </div>
            </Content>
        </Layout>
        </>
    )
}
export default  ReSetPassword